<template>
	<view class="content">
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		
		<!-- SDK状态显示 -->
		<view class="status-area">
			<text class="status-text">SDK状态:</text>
			<text class="status-value">{{sdkStatus}}</text>
			<text class="version-text">SDK版本: {{sdkVersion}}</text>
		</view>
		
		<!-- 按钮操作区域 -->
		<view class="button-area">
			<button type="primary" @click="initWithConfig" class="btn">初始化SDK</button>
			<button type="default" @click="toggleDebug" class="btn">切换调试模式</button>
			<button type="default" @click="checkStatus" class="btn">检查状态</button>
		</view>
		
		<!-- 激励视频状态显示 -->
		<view class="reward-status-area">
			<text class="status-text">激励视频状态:</text>
			<text class="status-value">{{rewardVideoStatus}}</text>
		</view>
		
		<!-- 激励视频操作区域 -->
		<view class="reward-button-area">
			<text class="section-title">激励视频广告</text>
			<button type="primary" @click="initRewardVideoAd" class="btn reward-btn">初始化激励视频</button>
			<button type="default" @click="loadRewardVideoAd" class="btn reward-btn" 
				:disabled="!isRewardVideoInited">加载激励视频</button>
			<button type="warn" @click="showRewardVideoAd" class="btn reward-btn" 
				:disabled="!isRewardVideoReady">展示激励视频</button>
			<button type="default" @click="checkRewardVideoStatus" class="btn reward-btn">检查激励视频状态</button>
		</view>
		
		<!-- 插屏广告状态显示 -->
		<view class="interstitial-status-area">
			<text class="status-text">插屏广告状态:</text>
			<text class="status-value">{{interstitialStatus}}</text>
		</view>
		
		<!-- 插屏广告操作区域 -->
		<view class="interstitial-button-area">
			<text class="section-title">插屏广告</text>
			<button type="primary" @click="initInterstitialAd" class="btn interstitial-btn">初始化插屏广告</button>
			<button type="default" @click="loadInterstitialAd" class="btn interstitial-btn" 
				:disabled="!isInterstitialInited">加载插屏广告</button>
			<button type="warn" @click="showInterstitialAd" class="btn interstitial-btn" 
				:disabled="!isInterstitialReady">展示插屏广告</button>
			<button type="default" @click="checkInterstitialStatus" class="btn interstitial-btn">检查插屏广告状态</button>
		</view>
		
		<!-- 横幅广告状态显示 -->
		<view class="banner-status-area">
			<text class="status-text">横幅广告状态:</text>
			<text class="status-value">{{bannerStatus}}</text>
		</view>
		
		<!-- 横幅广告操作区域 -->
		<view class="banner-button-area">
			<text class="section-title">横幅广告</text>
			<button type="primary" @click="initBannerAd" class="btn banner-btn">初始化横幅广告</button>
			<button type="default" @click="loadBannerAd" class="btn banner-btn" 
				:disabled="!isBannerInited">加载横幅广告</button>
			<button type="warn" @click="showBannerAd" class="btn banner-btn" 
				:disabled="!isBannerReady">显示横幅广告</button>
			<button type="default" @click="hideBannerAd" class="btn banner-btn" 
				:disabled="!isBannerShowing">隐藏横幅广告</button>
			<button type="default" @click="checkBannerStatus" class="btn banner-btn">检查横幅广告状态</button>
		</view>
		
		<!-- 横幅广告显示区域 -->
		<view class="banner-container" v-if="isBannerShowing">
			<text class="banner-placeholder">横幅广告将显示在这里</text>
		</view>
		
		<!-- 开屏广告状态显示 -->
		<view class="splash-status-area">
			<text class="status-text">开屏广告状态:</text>
			<text class="status-value">{{splashStatus}}</text>
		</view>
		
		<!-- 开屏广告操作区域 -->
		<view class="splash-button-area">
			<text class="section-title">开屏广告</text>
			<button type="primary" @click="initAndLoadSplashAd" class="btn splash-btn">初始化并加载开屏广告</button>
			<button type="warn" @click="showSplashAd" class="btn splash-btn" 
				:disabled="!isSplashReady">展示开屏广告</button>
			<button type="default" @click="checkSplashStatus" class="btn splash-btn">检查开屏广告状态</button>
			<button type="default" @click="debugSplashContainerInfo" class="btn splash-btn debug-btn">调试容器信息</button>
			<button type="default" @click="closeSplashAd" class="btn splash-btn close-btn">强制关闭开屏广告</button>
			<button type="default" @click="refreshPage" class="btn splash-btn refresh-btn">刷新页面</button>
		</view>
	</view>
</template>

<script>
	import {
		initSDK,
		initSDKWithConfig,
		isSDKInitialized,
		isSDKStarted,
		setDebugMode,
		getSDKVersion,
		initRewardVideo,
		loadRewardVideo,
		showRewardVideo,
		isRewardVideoReady,
		destroyRewardVideo,
		setUserInfo,
		initInterstitial,
		loadInterstitial,
		showInterstitial,
		isInterstitialReady,
		destroyInterstitial,
		initBanner,
		loadBanner,
		getBannerView,
		isBannerReady,
		removeBannerFromParent,
		destroyBanner,
		initAndLoadSplash,
		showSplash,
		isSplashReady,
		destroySplash,
		closeSplash,
		debugSplashContainer
	} from "@/uni_modules/moko-takuad";

	export default {
		data() {
			return {
				title: 'Takuad Demo',
				sdkStatus: '未初始化',
				sdkVersion: '获取中...',
				debugMode: true,
				rewardVideoStatus: '未初始化',
				isRewardVideoInited: false,
				isRewardVideoReady: false,
				rewardVideoPlacementId: 'b62ecb800e1f84',  // 请替换为您的激励视频广告位ID
				rewardVideoScenarioId: 'demo',  // 场景ID，用于统计
				currentUserId: 'takuad_user_001',
				currentUserData: 'takuad_userdata_001',
				// 插屏广告相关
				interstitialStatus: '未初始化',
				isInterstitialInited: false,
				isInterstitialReady: false,
				interstitialPlacementId: 'b62b028b61c800',  // 请替换为您的插屏广告位ID
				interstitialScenarioId: 'demo',  // 插屏广告场景ID
				// 横幅广告相关
				bannerStatus: '未初始化',
				isBannerInited: false,
				isBannerReady: false,
				isBannerShowing: false,
				bannerPlacementId: 'b62b01a36e4572',  // 请替换为您的横幅广告位ID
				bannerScenarioId: 'demo',  // 横幅广告场景ID
				// 开屏广告相关
				splashStatus: '未初始化',
				isSplashInited: false,
				isSplashReady: false,
				splashPlacementId: 'b62b0272f8762f',  // 使用横幅广告位测试，请替换为您的开屏广告位ID
				splashScenarioId: 'demo',  // 开屏广告场景ID
				splashTimeout: 5000  // 开屏广告超时时间（毫秒）
			}
		},
		onLoad() {
			// 基础初始化调用
			initSDK()
			
			// 获取SDK版本
			this.updateSDKVersion()
			
			// 设置调试模式
			setDebugMode(this.debugMode)
			
			// 设置用户信息
			setUserInfo(this.currentUserId, this.currentUserData)
		},
		methods: {
			// 使用配置初始化SDK
			initWithConfig() {
				// 请替换为您的真实AppID和AppKey
				const appId = "a62b013be01931"
				const appKey = "c3d0d2a9a9d451b07e62b509659f7c97"
				
				initSDKWithConfig(appId, appKey)
				
				// 延迟检查状态
				setTimeout(() => {
					this.checkStatus()
				}, 1000)
			},
			
			// 切换调试模式
			toggleDebug() {
				this.debugMode = !this.debugMode
				setDebugMode(this.debugMode)
				
				uni.showToast({
					title: `调试模式: ${this.debugMode ? '开启' : '关闭'}`,
					icon: 'none'
				})
			},
			
			// 检查SDK状态
			checkStatus() {
				const initialized = isSDKInitialized()
				const started = isSDKStarted()
				
				if (initialized && started) {
					this.sdkStatus = '已初始化并启动'
				} else if (initialized) {
					this.sdkStatus = '已初始化'
				} else {
					this.sdkStatus = '未初始化'
				}
				
				this.updateSDKVersion()
			},
			
			// 更新SDK版本信息
			updateSDKVersion() {
				this.sdkVersion = getSDKVersion()
			},
			
			// ==================== 激励视频相关方法 ====================
			
			// 初始化激励视频广告
			initRewardVideoAd() {
				try {
					// 使用场景ID进行初始化，便于统计场景到达率
					initRewardVideo(this.rewardVideoPlacementId, this.rewardVideoScenarioId)
					this.isRewardVideoInited = true
					this.rewardVideoStatus = '已初始化'
					
					uni.showToast({
						title: '激励视频初始化成功',
						icon: 'success'
					})
				} catch (e) {
					console.error('初始化激励视频失败:', e)
					uni.showToast({
						title: '初始化失败',
						icon: 'error'
					})
				}
			},
			
			// 加载激励视频广告
			loadRewardVideoAd() {
				if (!this.isRewardVideoInited) {
					uni.showToast({
						title: '请先初始化激励视频',
						icon: 'none'
					})
					return
				}
				
				try {
					// 传递用户自定义参数用于防作弊等场景
					loadRewardVideo(this.currentUserId, this.currentUserData)
					this.rewardVideoStatus = '加载中...'
					
					// 模拟加载过程，实际开发中应该监听回调
					setTimeout(() => {
						this.checkRewardVideoStatus()
					}, 3000)
					
					uni.showToast({
						title: '开始加载激励视频',
						icon: 'loading'
					})
				} catch (e) {
					console.error('加载激励视频失败:', e)
					uni.showToast({
						title: '加载失败',
						icon: 'error'
					})
				}
			},
			
			// 展示激励视频广告
			showRewardVideoAd() {
				if (!this.isRewardVideoReady) {
					uni.showToast({
						title: '激励视频未准备好',
						icon: 'none'
					})
					return
				}
				
				try {
					const success = showRewardVideo()
					if (success) {
						this.rewardVideoStatus = '播放中...'
						uni.showToast({
							title: '激励视频开始播放',
							icon: 'success'
						})
						
						// 播放完成后重置状态
						setTimeout(() => {
							this.isRewardVideoReady = false
							this.rewardVideoStatus = '已播放完成'
						}, 2000)
					} else {
						uni.showToast({
							title: '展示失败',
							icon: 'error'
						})
					}
				} catch (e) {
					console.error('展示激励视频失败:', e)
					uni.showToast({
						title: '展示失败',
						icon: 'error'
					})
				}
			},
			
			// 检查激励视频状态
			checkRewardVideoStatus() {
				try {
					this.isRewardVideoReady = isRewardVideoReady()
					
					if (this.isRewardVideoReady) {
						this.rewardVideoStatus = '已准备好'
					} else if (this.isRewardVideoInited) {
						this.rewardVideoStatus = '未准备好'
					} else {
						this.rewardVideoStatus = '未初始化'
					}
					
					console.log('激励视频状态检查:', {
						inited: this.isRewardVideoInited,
						ready: this.isRewardVideoReady,
						status: this.rewardVideoStatus
					})
				} catch (e) {
					console.error('检查激励视频状态失败:', e)
				}
			},
			
			// ==================== 插屏广告相关方法 ====================
			
			// 初始化插屏广告
			initInterstitialAd() {
				try {
					// 使用场景ID进行初始化，便于统计场景到达率
					initInterstitial(this.interstitialPlacementId, this.interstitialScenarioId)
					this.isInterstitialInited = true
					this.interstitialStatus = '已初始化'
					
					uni.showToast({
						title: '插屏广告初始化成功',
						icon: 'success'
					})
				} catch (e) {
					console.error('初始化插屏广告失败:', e)
					uni.showToast({
						title: '初始化失败',
						icon: 'error'
					})
				}
			},
			
			// 加载插屏广告
			loadInterstitialAd() {
				if (!this.isInterstitialInited) {
					uni.showToast({
						title: '请先初始化插屏广告',
						icon: 'none'
					})
					return
				}
				
				try {
					loadInterstitial()
					this.interstitialStatus = '加载中...'
					
					// 模拟加载过程，实际开发中应该监听回调
					setTimeout(() => {
						this.checkInterstitialStatus()
					}, 3000)
					
					uni.showToast({
						title: '开始加载插屏广告',
						icon: 'loading'
					})
				} catch (e) {
					console.error('加载插屏广告失败:', e)
					uni.showToast({
						title: '加载失败',
						icon: 'error'
					})
				}
			},
			
			// 展示插屏广告
			showInterstitialAd() {
				if (!this.isInterstitialReady) {
					uni.showToast({
						title: '插屏广告未准备好',
						icon: 'none'
					})
					return
				}
				
				try {
					const success = showInterstitial()
					if (success) {
						this.interstitialStatus = '播放中...'
						uni.showToast({
							title: '插屏广告开始展示',
							icon: 'success'
						})
						
						// 展示完成后重置状态
						setTimeout(() => {
							this.isInterstitialReady = false
							this.interstitialStatus = '已展示完成'
						}, 2000)
					} else {
						uni.showToast({
							title: '展示失败',
							icon: 'error'
						})
					}
				} catch (e) {
					console.error('展示插屏广告失败:', e)
					uni.showToast({
						title: '展示失败',
						icon: 'error'
					})
				}
			},
			
			// 检查插屏广告状态
			checkInterstitialStatus() {
				try {
					this.isInterstitialReady = isInterstitialReady()
					
					if (this.isInterstitialReady) {
						this.interstitialStatus = '已准备好'
					} else if (this.isInterstitialInited) {
						this.interstitialStatus = '未准备好'
					} else {
						this.interstitialStatus = '未初始化'
					}
					
					console.log('插屏广告状态检查:', {
						inited: this.isInterstitialInited,
						ready: this.isInterstitialReady,
						status: this.interstitialStatus
					})
				} catch (e) {
					console.error('检查插屏广告状态失败:', e)
				}
			},
			
			// ==================== 横幅广告相关方法 ====================
			
			// 初始化横幅广告
			initBannerAd() {
				try {
					// 使用场景ID进行初始化，便于统计场景到达率
					const bannerView = initBanner(this.bannerPlacementId, this.bannerScenarioId, 500, 300)
					if (bannerView) {
						this.isBannerInited = true
						this.bannerStatus = '已初始化'
						
						uni.showToast({
							title: '横幅广告初始化成功',
							icon: 'success'
						})
					} else {
						throw new Error('初始化失败')
					}
				} catch (e) {
					console.error('初始化横幅广告失败:', e)
					uni.showToast({
						title: '初始化失败',
						icon: 'error'
					})
				}
			},
			
			// 加载横幅广告
			loadBannerAd() {
				if (!this.isBannerInited) {
					uni.showToast({
						title: '请先初始化横幅广告',
						icon: 'none'
					})
					return
				}
				
				try {
					loadBanner()
					this.bannerStatus = '加载中...'
					
					// 模拟加载过程，实际开发中应该监听回调
					setTimeout(() => {
						this.checkBannerStatus()
					}, 3000)
					
					uni.showToast({
						title: '开始加载横幅广告',
						icon: 'loading'
					})
				} catch (e) {
					console.error('加载横幅广告失败:', e)
					uni.showToast({
						title: '加载失败',
						icon: 'error'
					})
				}
			},
			
			// 显示横幅广告
			showBannerAd() {
				if (!this.isBannerReady) {
					uni.showToast({
						title: '横幅广告未准备好',
						icon: 'none'
					})
					return
				}
				
				try {
					// 获取横幅广告View
					const bannerView = getBannerView()
					if (bannerView) {
						this.isBannerShowing = true
						this.bannerStatus = '正在显示'
						
						uni.showToast({
							title: '横幅广告开始显示',
							icon: 'success'
						})
						
						console.log('横幅广告View:', bannerView)
						// 注意：在实际使用中，您需要将bannerView添加到原生布局中
						// 由于这是演示，我们只是显示一个占位符
					} else {
						uni.showToast({
							title: '获取横幅广告失败',
							icon: 'error'
						})
					}
				} catch (e) {
					console.error('显示横幅广告失败:', e)
					uni.showToast({
						title: '显示失败',
						icon: 'error'
					})
				}
			},
			
			// 隐藏横幅广告
			hideBannerAd() {
				try {
					removeBannerFromParent()
					this.isBannerShowing = false
					this.bannerStatus = '已隐藏'
					
					uni.showToast({
						title: '横幅广告已隐藏',
						icon: 'success'
					})
				} catch (e) {
					console.error('隐藏横幅广告失败:', e)
					uni.showToast({
						title: '隐藏失败',
						icon: 'error'
					})
				}
			},
			
			// 检查横幅广告状态
			checkBannerStatus() {
				try {
					this.isBannerReady = isBannerReady()
					
					if (this.isBannerReady) {
						this.bannerStatus = '已准备好'
					} else if (this.isBannerInited) {
						this.bannerStatus = '未准备好'
					} else {
						this.bannerStatus = '未初始化'
					}
					
					console.log('横幅广告状态检查:', {
						inited: this.isBannerInited,
						ready: this.isBannerReady,
						showing: this.isBannerShowing,
						status: this.bannerStatus
					})
				} catch (e) {
					console.error('检查横幅广告状态失败:', e)
				}
			},
			
			// ==================== 开屏广告相关方法 ====================
			
			// 初始化并加载开屏广告
			initAndLoadSplashAd() {
				try {
					// 开屏广告的特点是需要在应用启动时展示，这里直接初始化并加载
					initAndLoadSplash(this.splashPlacementId, this.splashScenarioId, this.splashTimeout)
					this.isSplashInited = true
					this.splashStatus = '加载中...'
					
					// 模拟加载过程，实际开发中应该监听回调
					setTimeout(() => {
						this.checkSplashStatus()
					}, 3000)
					
					uni.showToast({
						title: '开屏广告初始化并加载',
						icon: 'loading'
					})
				} catch (e) {
					console.error('初始化开屏广告失败:', e)
					uni.showToast({
						title: '初始化失败',
						icon: 'error'
					})
				}
			},
			
			// 展示开屏广告
			showSplashAd() {
				if (!this.isSplashReady) {
					uni.showToast({
						title: '开屏广告未准备好',
						icon: 'none'
					})
					return
				}
				
				try {
					// 开屏广告需要一个足够大的容器（至少占屏幕75%）
					// 在实际使用中，应该在应用启动时展示
					const success = showSplash(null, true)
					if (success) {
						this.splashStatus = '正在展示'
						uni.showToast({
							title: '开屏广告开始展示',
							icon: 'success'
						})
						
						// 开屏广告展示后会自动销毁，更新状态
						setTimeout(() => {
							this.isSplashReady = false
							this.splashStatus = '已结束'
						}, 3000)
					} else {
						uni.showToast({
							title: '展示失败',
							icon: 'error'
						})
					}
				} catch (e) {
					console.error('展示开屏广告失败:', e)
					uni.showToast({
						title: '展示失败',
						icon: 'error'
					})
				}
			},
			
			// 检查开屏广告状态
			checkSplashStatus() {
				try {
					this.isSplashReady = isSplashReady()
					
					if (this.isSplashReady) {
						this.splashStatus = '已准备好'
					} else if (this.isSplashInited) {
						this.splashStatus = '未准备好'
					} else {
						this.splashStatus = '未初始化'
					}
					
					console.log('开屏广告状态检查:', {
						inited: this.isSplashInited,
						ready: this.isSplashReady,
						status: this.splashStatus
					})
				} catch (e) {
					console.error('检查开屏广告状态失败:', e)
				}
			},
			
			// 调试开屏广告容器信息
			debugSplashContainerInfo() {
				try {
					debugSplashContainer()
					uni.showToast({
						title: '调试信息已输出到控制台',
						icon: 'none'
					})
					console.log('调试开屏广告容器信息')
				} catch (e) {
					console.error('调试开屏广告容器失败:', e)
					uni.showToast({
						title: '调试失败',
						icon: 'error'
					})
				}
			},
			
			// 强制关闭开屏广告
			closeSplashAd() {
				try {
					closeSplash()
					
					// 重置状态
					this.isSplashReady = false
					this.splashStatus = '已强制关闭'
					
					uni.showToast({
						title: '开屏广告已强制关闭',
						icon: 'success'
					})
					
					console.log('强制关闭开屏广告')
				} catch (e) {
					console.error('强制关闭开屏广告失败:', e)
					uni.showToast({
						title: '关闭失败',
						icon: 'error'
					})
				}
			},
			
			// 刷新页面
			refreshPage() {
				try {
					// 重新加载当前页面
					uni.reLaunch({
						url: '/pages/index/index'
					})
					
					console.log('页面刷新')
				} catch (e) {
					console.error('页面刷新失败:', e)
					uni.showToast({
						title: '刷新失败',
						icon: 'error'
					})
				}
			}
		},
		
		// 页面销毁时清理资源
		onUnload() {
			try {
				destroyRewardVideo()
				destroyInterstitial()
				destroyBanner()
				destroySplash()
				console.log('页面销毁，清理广告资源')
			} catch (e) {
				console.error('清理广告资源失败:', e)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		font-weight: bold;
	}

	.status-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 30rpx;
		background-color: #f8f8f8;
		border-radius: 20rpx;
		width: 80%;
	}

	.status-text {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.status-value {
		font-size: 32rpx;
		color: #007aff;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.version-text {
		font-size: 24rpx;
		color: #666;
	}

	.button-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80%;
		margin-bottom: 40rpx;
	}

	.btn {
		width: 100%;
		margin-bottom: 20rpx;
		border-radius: 50rpx;
	}

	.reward-status-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 25rpx;
		background-color: #e8f5ff;
		border-radius: 20rpx;
		width: 80%;
		border: 2rpx solid #007aff;
	}

	.reward-button-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80%;
		margin-top: 0rpx;
		padding: 30rpx;
		background-color: #fff8f0;
		border-radius: 20rpx;
		border: 2rpx solid #ff9500;
	}

	.reward-btn {
		width: 100%;
		margin-bottom: 15rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
	}

	.reward-btn:disabled {
		opacity: 0.5;
		background-color: #f0f0f0;
		color: #999;
	}

	.interstitial-status-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 60rpx;
		padding: 25rpx;
		background-color: #f0f9ff;
		border-radius: 20rpx;
		width: 80%;
		border: 2rpx solid #0ea5e9;
	}

	.interstitial-button-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80%;
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: #f0f4ff;
		border-radius: 20rpx;
		border: 2rpx solid #6366f1;
	}

	.interstitial-btn {
		width: 100%;
		margin-bottom: 15rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
	}

	.interstitial-btn:disabled {
		opacity: 0.5;
		background-color: #f0f0f0;
		color: #999;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.banner-status-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 60rpx;
		padding: 25rpx;
		background-color: #f0fdf4;
		border-radius: 20rpx;
		width: 80%;
		border: 2rpx solid #22c55e;
	}

	.banner-button-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80%;
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: #f0fff4;
		border-radius: 20rpx;
		border: 2rpx solid #10b981;
	}

	.banner-btn {
		width: 100%;
		margin-bottom: 15rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
	}

	.banner-btn:disabled {
		opacity: 0.5;
		background-color: #f0f0f0;
		color: #999;
	}

	.banner-container {
		width: 80%;
		margin-top: 40rpx;
		padding: 20rpx;
		background-color: #f5f5f5;
		border-radius: 15rpx;
		border: 2rpx dashed #22c55e;
		min-height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.banner-placeholder {
		font-size: 26rpx;
		color: #666;
		text-align: center;
	}

	.splash-status-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 60rpx;
		padding: 25rpx;
		background-color: #fef7ff;
		border-radius: 20rpx;
		width: 80%;
		border: 2rpx solid #d946ef;
	}

	.splash-button-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80%;
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: #fdf4ff;
		border-radius: 20rpx;
		border: 2rpx solid #c026d3;
	}

	.splash-btn {
		width: 100%;
		margin-bottom: 15rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
	}

	.splash-btn:disabled {
		opacity: 0.5;
		background-color: #f0f0f0;
		color: #999;
	}

	.debug-btn {
		background: linear-gradient(45deg, #f39c12, #e67e22) !important;
		color: white !important;
		border: none !important;
		opacity: 0.9;
	}

	.close-btn {
		background: linear-gradient(45deg, #e74c3c, #c0392b) !important;
		color: white !important;
		border: none !important;
		opacity: 0.9;
	}

	.refresh-btn {
		background: linear-gradient(45deg, #2ecc71, #27ae60) !important;
		color: white !important;
		border: none !important;
		opacity: 0.9;
	}
</style>